<template>
  <a-spin dot :loading="isLoading" style="height: 100%">
    <div class="app-container stencil-container">
      <a-breadcrumb style="margin-bottom: 20px">
        <a-breadcrumb-item>{{ userStore.userInfo.tenantTypeCode == 1 ? "模板设置" : "商城配置" }}</a-breadcrumb-item>
        <a-breadcrumb-item>{{ breadcrumb[pathName] }}</a-breadcrumb-item>
        <a-breadcrumb-item v-if="label">{{ label }}</a-breadcrumb-item>
      </a-breadcrumb>
      <micro-app
        v-if="!isError"
        class="micro-app"
        name="stencil"
        destroy
        :url="appUrlConfig[type[userStore.userInfo.tenantTypeCode] as 'factory'|'business']"
        baseroute="/"
        :data="{ token: getToken(), userInfo: userStore.userInfo }"
        router-mode="native"
        @mounted="microAppMounted"
        @error="onError"
      />
      <ErrorPage v-else :code="500"></ErrorPage>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import { getToken } from "@/utils/auth";
import appUrlConfig from "@/config/appUrlconfig";
import { useUserStore } from "@/stores";
import ErrorPage from "@/views/error/components/ErrorPage.vue";
import microApp from "@micro-zoe/micro-app";
import { mainReceiveData } from "@/microApp/utils";

const userStore = useUserStore();
const isLoading = ref(true);
const microAppMounted = () => {
  isLoading.value = false;
};
const isError = ref(false);
const onError = () => {
  isError.value = true;
  isLoading.value = false;
};
const type: string[] = ["factory", "business"];
const breadcrumb: { [key: string]: string } = {
  fittings: "配件备注模板",
  warranty: "商品质保模板"
};
const label = ref<string>("");
const pathName = ref<string>("fittings");
mainReceiveData("stencil", (data: any) => {
  pathName.value = data.path.split("/")[2];
  label.value = data.meta.title;
});
</script>

<style scoped lang="scss">
.stencil-container {
  height: 100%;
  box-sizing: border-box;
}

.micro-app {
  height: calc(100% - 44px);
}

:deep(micro-app-body) {
  height: 100%;
  background-color: white;
  border-radius: 10px;
}
</style>
